<template>
  <div class="c-editor-page-drawer__container">
    <a-flex align="center" justify="space-around">
      <span>{{ currentPage }} / {{ totalPage }}</span>
      <a-tooltip name="多页管理" placement="top">
        <BarsOutlined
          class="c-editor-page-drawer__icon"
          :class="{ icon__click: openPageDrawer }"
          @click="() => (openPageDrawer = true)"
        />
      </a-tooltip>
    </a-flex>
  </div>

  <a-drawer
    title="多页"
    placement="left"
    v-model:open="openPageDrawer"
    :maskStyle="{ background: 'transparent' }"
    :get-container="false"
    :footerStyle="footerStyle"
    @click="() => (openPageDrawer = false)"
  >
    <TransitionGroup name="list">
      <CanvasPage
        v-for="(item, index) in pageList"
        :key="item.id"
        :canvas-page="item"
        :current-page-id="currentPageId"
        @current-page="handleChangePage"
        draggable="true"
        @dragenter="dragenter($event, index)"
        @dragover="dragover($event)"
        @dragstart="dragstart(index)"
      ></CanvasPage>
    </TransitionGroup>
    <template #footer>
      <a-button :icon="h(PlusOutlined)" type="link" @click="addPage">
        新建多页
      </a-button>
    </template>
  </a-drawer>
</template>

<script setup lang="ts">
import { ref, h, reactive, onMounted } from 'vue';
import { PlusOutlined, BarsOutlined } from '@ant-design/icons-vue';
import CanvasPage from '@/pages/editor/components/PageDrawer/CanvasPage.vue';

const openPageDrawer = ref(false);
const currentPage = ref(1);
const totalPage = ref(1);
const footerStyle = {
  height: '4rem',
  display: 'flex',
  'align-items': 'center',
  'font-size': '1rem',
  'justify-content': 'center',
  'user-select': 'none',
};
const currentPageId = ref(1);
const pageList = reactive([
  {
    id: 1,
    name: '画布1',
    imgUrl: '/src/assets/例图.jpg',
  },
  {
    id: 2,
    name: '画布2',
    imgUrl: '/src/assets/例图.jpg',
  },
  {
    id: 3,
    name: '画布3',
    imgUrl: '/src/assets/例图.jpg',
  },
  {
    id: 4,
    name: '画布4',
    imgUrl: '/src/assets/例图.jpg',
  },
  {
    id: 5,
    name: '画布5',
    imgUrl: '/src/assets/例图.jpg',
  },
]);

// 多页管理 start
onMounted(() => {
  totalPage.value = pageList.length;
});
const handleChangePage = (payload: any) => {
  currentPageId.value = payload.currentId;
  currentPage.value = payload.currentId;
};
const addPage = () => {
  pageList.push({
    id: 6,
    name: '画布6',
    imgUrl: '/src/assets/例图.jpg',
  });
  totalPage.value = pageList.length;
};
// 多页管理 end

// 拖拽 功能 start
const dragIndex = ref(-1);
const dragstart = (index: number) => {
  dragIndex.value = index;
};
const dragenter = (e: any, index: number) => {
  e.preventDefault();
  // 避免源对象触发自身的dragenter事件
  if (dragIndex.value !== index) {
    const source = pageList[dragIndex.value];
    pageList.splice(dragIndex.value, 1);
    pageList.splice(index, 0, source);
    // 排序变化后目标对象的索引变成源对象的索引
    dragIndex.value = index;
  }
};
const dragover = (e: any) => {
  e.preventDefault();
};
// 拖拽 功能 end
</script>

<style scoped lang="scss">
.c-editor-page-drawer__container {
  position: fixed;
  bottom: 15px;
  right: 15px;
  font-weight: bold;
  font-family: sans-serif, Verdana, Geneva, Tahoma, 'Segoe UI';
  background-color: #fff;
  z-index: 1000;
  border-radius: 6px;
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.1);
  padding: 8px;
  min-width: 120px;
  max-width: 160px;
  user-select: none;

  & div {
    font-size: 21px;
    line-height: 21px;
  }
}
.c-editor-page-drawer__icon {
  cursor: pointer;
  border-radius: 8%;
  padding: 5px;
  &:hover {
    background: rgba(185, 185, 185, 0.2);
    color: #108ee9;
  }
}
.icon__click {
  color: #108ee9;
  background: rgba(16, 142, 233, 0.1);
}
</style>
